<template>
    <div class="app-container">
        <el-row :gutter="0">
            <!--专病数据-->
            <el-form class="formBox formBox1" :model="queryParams" ref="queryForm" size="small" :inline="true"
                v-show="showSearch" label-width="68px">
                <el-row>
                    <el-form-item label="选择医院">
                        <department :isHospital="true" :isdepat="true" @refreshData="refreshData" deptWidth="160px"
                            :isUserAll="true" ref="departments">
                        </department>
                    </el-form-item>
                    <el-form-item label="顾客ID" prop="patientId">
                        <el-input v-model="queryParams.patientId" placeholder="顾客ID" clearable style="width: 160px"
                            @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="姓名" prop="patientName">
                        <el-input v-model="queryParams.patientName" placeholder="顾客姓名" clearable style="width: 160px"
                            @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="手机号" prop="patientPhone">
                        <el-input v-model="queryParams.patientPhone" placeholder="顾客手机号" clearable style="width: 160px"
                            @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="状态" prop="state">
                        <el-select v-model="queryParams.state" placeholder="状态" clearable filterable
                            style="width: 160px" @change="handleQuery">
                            <el-option v-for="dict in formStatusList" :key="dict.value" :label="dict.label"
                                :value="dict.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="治疗项目" prop="state">
                        <el-select v-model="queryParams.planId" placeholder="治疗项目" clearable filterable
                            style="width: 160px" @change="handleQuery">
                            <el-option v-for="dict in planListArray" :key="dict.planId" :label="dict.medicalEquipment"
                                :value="dict.planId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="预约日期">
                        <el-date-picker v-model="dateRange" style="width: 200px;" value-format="yyyy-MM-dd"
                            type="daterange" size="mini" range-separator="-" :picker-options="pickerOptions"
                            start-placeholder="开始日期" end-placeholder="结束日期" @change="handleQuery"
                            :clearable="false"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                        <!-- <el-button icon="el-icon-printer" size="mini" @click="resetQuery">打印</el-button> -->
                    </el-form-item>
                </el-row>


            </el-form>
            <div class="formBox">
                <div style="color:red;line-height:30px;">* 已预约的信息，在预约时间排班之后，可以进行重新选择可预约的时间段！（爽约、已签到均无法修改）</div>
                <el-table border v-loading="loading" :data="tableLists">
                    <el-table-column label="顾客ID" align="center" prop="patientId" sortable :show-overflow-tooltip="true"
                        width="100" />
                    <el-table-column label="顾客姓名" align="center" prop="patientName" sortable
                        :show-overflow-tooltip="true" width="100" />
                        <el-table-column label="顾客手机号" align="center" prop="patientPhone" sortable
                        :show-overflow-tooltip="true" width="120" >
                        <template slot-scope="scope">
                            <span v-if="scope.row.patientPhone" style="color:#000;font-weight:700;">{{ scope.row.patientPhone }}</span>
                            
                        </template>
                    </el-table-column>

                    <el-table-column label="预约时间" align="center" prop="appointmentDate" sortable
                        :show-overflow-tooltip="true" width="140">

                    </el-table-column>
                    <el-table-column label="星期" align="center" prop="week" sortable :show-overflow-tooltip="true"
                        width="100">

                    </el-table-column>
                    <el-table-column label="预约时刻" align="center" prop="roleNames" sortable :show-overflow-tooltip="true"
                        width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.timeSlot == 0" style="color:rgb(255, 0, 170)">上午</span>
                            <span v-else style="color:rgb(0, 174, 255)">下午</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="治疗项目" align="center" sortable prop="medicalEquipment"
                        :show-overflow-tooltip="true" width="200">

                    </el-table-column>
                    <el-table-column label="是否排班" align="center" sortable prop="state" :show-overflow-tooltip="true"
                        width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.schedulingId" style="color:rgb(89, 0, 255)">已排班</span>

                            <span v-else style="color:rgb(138, 136, 136)">未排班</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" align="center" sortable prop="state" :show-overflow-tooltip="true"
                        width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.state == 5" style="color:rgb(47, 0, 255)">已确认</span>
                            <span v-else-if="scope.row.state == 1" style="color:rgb(0, 255, 34)">已签到</span>
                            <span v-else-if="scope.row.state == 2" style="color:rgb(105, 108, 109)">爽约</span>
                            <span v-else style="color:red">已预约</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="预约方式" align="center" sortable prop="roleNames" :show-overflow-tooltip="true"
                        width="160">
                        <template slot-scope="scope">
                            <span v-if="scope.row.way == 0" style="color:rgb(192, 85, 85)">诊间预约</span>
                            <span v-else style="color:rgb(44, 44, 153)">小程序预约</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="预约医生" align="center" sortable prop="doctorNickname"
                        :show-overflow-tooltip="true" width="140">

                    </el-table-column>
                    <el-table-column label="医院" align="center" prop="hospitalName" :show-overflow-tooltip="true"
                        width="150">
                        <template slot-scope="scope">
                            <departTag :options="deptNameLists" :value="scope.row.hospitalId" />
                        </template>
                    </el-table-column>
                    <el-table-column label="科室" align="center" prop="deptName" :show-overflow-tooltip="true"
                        width="150">
                        <template slot-scope="scope">
                            <departTag :options="deptNameLists" :value="scope.row.deptId" />
                        </template>
                    </el-table-column>
                    <el-table-column sortable label="创建记日期" align="center" prop="createDate" width="180">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.createDate) }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width"
                        width="150">
                        <template slot-scope="scope">

                            <el-button size="mini" type="text" icon="el-icon-edit"
                                v-if="scope.row.state == 0 && scope.row.schedulingId"
                                @click="handleUpdate(scope.row)">修改</el-button>
                            <!-- <el-button size="mini" type="text" icon="el-icon-edit" v-else :disabled="true"
                                  >修改</el-button> -->
                            <el-button size="mini" type="text" icon="el-icon-delete" v-if="scope.row.state == 0"
                                @click="handleDelete(scope.row, 1)">删除</el-button>
                            <el-button size="mini" type="text" icon="el-icon-delete" v-else
                                :disabled="true">删除</el-button>
                            <!-- v-if="((scope.row.state == 0||scope.row.state == 5||scope.row.state == 2)&&isAdmin)&&scope.row.schedulingId" -->
                            <el-button size="mini" type="text" icon="el-icon-mouse"
                                v-if="((scope.row.state == 0 || scope.row.state == 5 || scope.row.state == 2) && (isAdmin||isUpdate==1) && scope.row.schedulingId)"
                                @click="handleSure(scope.row, 4)">确认签到</el-button>

                        </template>
                    </el-table-column>



                </el-table>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
            </div>

        </el-row>




        <!-- 弹出预约提示 -->
        <el-dialog title="修改预约信息" :visible.sync="appointTimeDialogVisible" v-dialogDrag width="500px" append-to-body
            :close-on-click-modal="false">
            <appointTime :formBacie="form" @refresh="getList"></appointTime>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import { deptNameList } from "@/api/system/dept";
import departTag from "@/views/components/department/departTag.vue";
import department from "@/views/components/department/index.vue";
import appointTime from "@/views/components/customerDetail/appointTime.vue";
import {
    getAppointment, updateSysTreatmentAppointmentStateById, updateAppointment, delAppointment,
    appointmentListInfo,
    listPlansAppointment

} from "@/api/appointManage/appointReserve";

export default {
    name: "userSum",
    dicts: [
        'sys_diagnosis_status',
        'sys_user_sex'
    ],
    components: { department, departTag, appointTime },
    data() {
        return {
            formStatusList: [
                { value: "0", label: "已预约" },
                { value: "5", label: "已确认" },
                { value: "1", label: "已签到" },
                { value: "2", label: "已爽约" },

            ],
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '明天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() + 3600 * 1000 * 24);
                        const end = date;
                        const start = date;
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '后天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() + 3600 * 1000 * 24 * 2);
                        const end = date;
                        const start = date;
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(start.getTime() + 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近六个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(start.getTime() + 3600 * 1000 * 24 * 180);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近1年',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(start.getTime() + 3600 * 1000 * 24 * 365);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            loading: true,
            tableLists: [],
            classifyList: [],
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 日期范围
            dateRange: [],
            // 表单参数
            // form: {},
            form: {

            },
            baseInfo: { updateStatus: false, },
            detailTitle: '',
            detailDialogVisible: false,
            appointTimeDialogVisible: false,
            deptNameLists: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                state: '0',
                hospitalId: '',
                deptId: '',
                patientId: '',
                patientName: '',
                patientPhone: '',
                planId: '',
            },
            btnStatus: 0,
            planListArray: [],//治疗项目集合
        };
    },
    watch: {},
    async created() {
        this.getlistPlansAppointment()
    },
    computed: {
        ...mapGetters(["isUpdate"]),
        isAdmin() {
            return this.$store.state.user.name === 'admin' ? true : false
        }
    },
    methods: {
        /** 删除按钮操作 */
        handleDelete(row, type) {
            if (type == 1) { //单个删除
                const title = row.appointmentDate + ' ' + row.week
                const treatmentAppointmentId = row.treatmentAppointmentId;
                this.$modal.confirm(
                    '是否确认删除"' +
                    title +
                    '"的数据项？'
                )
                    .then(function () {
                        return delAppointment(treatmentAppointmentId);
                    })
                    .then(() => {
                        this.getList();
                        // this.$modal.msgSuccess("删除预约成功");
                    })
                    .catch(() => { });
            }
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            const treatmentAppointmentId = row.treatmentAppointmentId;
            getAppointment(treatmentAppointmentId).then((response) => {
                let data = response.data;
                this.form = data

                this.appointTimeDialogVisible = true
            });
        },
        selectable(row, index) {
            var strtime = row.appointmentDate.replace("/-/g", "/");//时间转换
            var date1 = new Date(strtime);//现在时间
            var date2 = new Date();
            var d2 = date2.getFullYear() + "/" + (date2.getMonth() + 1) + "/" + date2.getDate()
            var date3 = new Date(d2);
            //判断时间是否过期
            return date1 < date3 ? false : true;
        },
        refreshData(data) {
            console.log(data)
            if (data.hospitalId) {
                this.queryParams.hospitalId = data.hospitalId
                this.queryParams.deptId = data.deptId


            } else {
                this.queryParams.hospitalId = ''
                this.queryParams.deptId = ''
            }

            this.getdeptNameList()

        },
        // 回显医院及门诊
        getdeptNameList() {
            deptNameList().then((response) => {
                this.deptNameLists = response.data;
                this.getList()
            });
        },
        //获取治疗项目筛选
        getlistPlansAppointment() {//
            listPlansAppointment().then((response) => {
                let data = response.data;
                console.log(data)
                this.planListArray = data
            });
        },
        sureupdateSysTreatmentAppointmentStateById(id) {
            let params = {
                treatmentAppointmentId: id,
                state: 1
            }
            updateSysTreatmentAppointmentStateById(params).then((response) => {
                if (response.code == 200) {
                    this.$modal.msgSuccess("预约已成功签到~");
                    this.getList();
                }
            });
        },
        //handleSure
        handleSure(row) {
            const title = row.appointmentDate + row.week
            const treatmentAppointmentId = row.treatmentAppointmentId;
            let that = this
            this.$modal.confirm(
                '是否确认"' +
                title +
                '"已履约，并签到？'
            )
                .then(function () {
                    console.log('点击确认')
                    that.sureupdateSysTreatmentAppointmentStateById(treatmentAppointmentId);
                })

                .catch(() => { });

        },
        // 真实序号计算（计算分页影响）
        getIndex(index) {
            return (this.queryParams.pageNum - 1) * this.queryParams.pageNum + index + 1;
        },
        /** 查询设备列表 */
        getList() {
            let that = this
            that.loading = true;
            let params = {
                startTime: that.dateRange[0],
                endTime: that.dateRange[1],
                ...that.queryParams
            }
            appointmentListInfo(params).then((response) => {
                if (response.code == 200) {
                    this.tableLists = response.rows;
                    this.total = response.total;
                }
                this.appointTimeDialogVisible = false
                this.loading = false;
            });

        },
        goDetail(row) {
            this.detailTitle = '顾客详情'
            this.baseInfo = row
            this.detailDialogVisible = true

        },
        // 取消按钮
        cancel() {

        },

        // 表单重置
        reset() {

        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },



    },
};
</script>
<style scoped></style>
